<template>
  <div class="carDetail">
    <nav-bar :title="title" :left-arrow="true"></nav-bar>
    <div class="contain">
      <div class="top">
        <img src="../../assets/car.png" alt="">
        <div class="right">
          <p>
            车牌：{{car.licensePlate}}
          </p>
          <p>
            车型：{{car.type}}
          </p>
        </div>
      </div>
      <div class="middle">
        <div>
          <div class="message">
            <p>
              距离您：{{line}}米
            </p>
            <p>
              油量：{{car.quantity}}
            </p>
          </div>
          <div class="message">
            <p>
              预计行驶：{{car.estimate}}KM
            </p>
            <p>起步价：{{car.startPrice}}元</p>
          </div>
          <div class="message">
            <p>
              档位：{{car.gear}}
            </p>
          </div>
        </div>
        <div class="notice">
          <van-notice-bar
          scrollable
            left-icon="volume-o"
            text="为了您和他人的安全，请勿酒后驾驶"
          />
        </div>
        <div class="explain">
          <p>订单说明</p>
          <span>
            若未停放到指定停车区域，将扣除300元费用。
          </span>
          <span>
            不足1km部分，若小于等于400m按照0.5km收取；若大于400m部分按照1km收取
          </span>
            <van-button @click="goToRules" size="big">查看详细规则</van-button>
        </div>
      </div>
      <div class="bottom" v-if="!isShow">
        <van-tabbar>
          <van-tabbar-item class="left" @click="driving">
            立即驾驶
          </van-tabbar-item>
          <van-tabbar-item @click="order">
            立即预订
          </van-tabbar-item>
      </van-tabbar>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import NavBar from '../../components/NavBar'
import { orderCar, driving, getCarById, getUnpay } from '@/api/car'
import { myOrder } from '@/api/mine'
export default {
  name: 'CarDetail',
  components: {
    NavBar
  },
  data () {
    return {
      title: '车辆详情',
      carId: '',
      line: '',
      car: {},
      isShow: false,
      hasPay: false
    }
  },
  computed: {
    ...mapGetters([
      'isLogin',
      'userInfo'
    ])
  },
  created () {
    var temp = window.location.href.split('?')[1]
    var pram = new URLSearchParams('?' + temp)
    this.carId = pram.get('carId')
    this.line = pram.get('line')
    this.getCarDetail()
    this.getMyOrder()
    this.getPay()
    console.log(pram.get('carStatus'))
    if (parseInt(pram.get('carStatus')) !== 0) {
      this.isShow = true
    }
    console.log(this.isShow)
  },
  methods: {
    async getMyOrder () {
      const params = {
        userId: this.userInfo.userId
      }
      const { data: res } = await myOrder(params)
      if (res.data.length !== 0) {
        this.isShow = true
        this.$notify({ type: 'danger', message: '你有预订订单，若重新预订请前往取消' })
      }
    },
    async getCarDetail () {
      const params = parseInt(this.carId)
      const { data: res } = await getCarById(params)
      console.log(res)
      this.car = res.data
    },
    async getPay () {
      const params = {
        userId: this.userInfo.userId
      }
      const { data: res } = await getUnpay(params)
      if (res.data !== null) {
        this.hasPay = true
      }
    },
    driving () {
      console.log(this.hasPay)
      if (this.hasPay) {
        this.$notify({ type: 'danger', message: '您还有未支付的订单，请完成支付支付' })
        const _this = this
        setTimeout(() => {
          this.$router.push({
            path: '/toPay',
            query: {
              userId: _this.userInfo.userId
            }
          })
        }, 1000)
      } else {
        this.$dialog.confirm({
          message: '你确定要驾驶吗？'
        })
          .then(async () => {
          // on confirm
          // 请求数据
            const params = {
              carId: parseInt(this.carId),
              userId: this.userInfo.userId
            }
            const { data: res } = await driving(params)
            if (res.meta.status === 200) {
              this.isShow = this.isShow = true
              this.$dialog.alert({
                message: '汽车开锁成功，页面即将跳转...',
                showConfirmButton: false
              }).then(() => {
                // on close
              })
              setTimeout(() => {
                this.$dialog.close()
                this.$router.push('/home')
              }, 2000)
            }
          })
          .catch(() => {
            // on cancel
          })
      }
    },
    async order () {
      console.log(this.userInfo.userId)
      const params = {
        userId: this.userInfo.userId,
        carId: parseInt(this.carId)
      }
      const { data: res } = await orderCar(params)
      if (res.meta.status === 200) {
        this.isShow = true
        this.$dialog.alert({
          message: '预订成功，页面即将跳转...',
          showConfirmButton: false
        }).then(() => {
          // on close
        })
        setTimeout(() => {
          this.$dialog.close()
          this.$router.push('/home')
        }, 2000)
      }
    },
    goToRules () {
      this.$router.push({
        path: '/orderRules',
        query: {
          carId: this.carId
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.contain{
  padding: 20px;
  height: 100%;
}
.top{
  display: flex;
  .right{
    margin-left: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    p{
      font-size: 18px;
      color: rgb(95, 95, 95);
    }
  }
}
.middle{
  margin-top: 25px;
  height: 90%;
  box-shadow: 0 0 5px #ccc;
  border-radius: 3px;
  padding: 10px;
  .message{
    display: flex;
    justify-content: space-around;
  }
  p{
    line-height: 30px;
    font-size: 16px;
    color: rgb(95, 95, 95);
    font-weight: bolder;
  }
  .explain{
    span{
      display: block;
      line-height: 24px;
      text-indent: 20px;
      font-size: 12px;
      color: #ccc;
    }
    .van-button{
      margin-left: 70%;
      text-align: center;
      span{
        text-indent: 0;
      }
    }
  }
}
.left{
  background: #0bbef5;
  color: #fff;
}
</style>
